<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Test List/Grid Destruction</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name="viewport" content="width=570" />
		<style type="text/css">
			@import "../../dojo/resources/dojo.css";
			@import "../../dijit/themes/claro/claro.css";
			@import "../css/skins/claro.css";
			
			body {
				margin: 0 5%;
			}
			
			.clear { clear: both; }
			
			.dgrid {
				height: 20em;
			}
			
			/* add styles to size this grid appropriately */
			#grid {
				width: 70%;
				float: left;
			}
			#grid .field-order {
				width: 7%;
			}
			#grid .field-name {
				width: 18%;
			}
			
			#list {
				width: 25%;
				float: right;
			}
		</style>
		<script type="text/javascript" src="../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script type="text/javascript">
			var data = [
				{order: 1, name:"preheat", description:"Preheat your oven to 350F",date: new Date()},
				{order: 2, name:"mix dry", description:"In a medium bowl, combine flour, salt, and baking soda",date: new Date()},
				{order: 3, name:"mix butter", description:"In a large bowl, beat butter, then add the brown sugar and white sugar then mix",date: new Date()},
				{order: 4, name:"mix together", description:"Slowly add the dry ingredients from the medium bowl to the wet ingredients in the large bowl, mixing until the dry ingredients are totally combined"},
				{order: 5, name:"chocolate chips", description:"Add chocolate chips"},
				{order: 6, name:"make balls", description:"Scoop up a golf ball size amount of dough with a spoon and drop in onto a cookie sheet"},
				{order: 7, name:"bake", description:"Put the cookies in the oven and bake for about 10-14 minutes"},
				{order: 8, name:"remove", description:"Using a spatula, lift cookies off onto wax paper or a cooling rack"},
				{order: 9, name:"eat", description:"Eat and enjoy!"}
			];
			
			require(["dgrid/List", "dgrid/Grid", "dojo/_base/array", "dgrid/editor",
					"dijit/form/TextBox", "dijit/form/DateTextBox", "dojo/domReady!"],
				function(List, Grid, arrayUtil, editor, TextBox, DateTextBox){
					var columns = {
						order: "step", // give column a custom name
						name: editor({}, TextBox, "dblclick"),
						description: {label: "what to do", sortable: false},
						date: editor({label: 'Date'}, DateTextBox)
					};
					window.list = new List({}, "list");
					list.renderArray(arrayUtil.map(data, function(item){
						return item.name;
					}));
					
					window.grid = new Grid({
						columns: columns
					}, "grid");
					grid.renderArray(data);
				});
			function countWidgets(){
				var count = 0;
				for(var i in dijit.registry._hash){
					count++;
				};
				alert("There are " + count + " widgets");
			}				
		</script>
	</head>
	<body class="claro">
		<h2>A basic grid and list rendered from an array</h2>
		<div id="grid"></div>
		<div id="list"></div>
		<div class="clear">
			<button onclick="grid.destroy();">Destroy Grid</button>
			<button onclick="list.destroy();">Destroy List</button>
			<button onclick="countWidgets();">Count Widgets</button>
		</div>
		<p>Try resizing the browser window after destroying the grid/list, to ensure
			no event handlers are left dangling that cause errors. Also check to make sure there are no widgets (count of 0) after they are destroyed.</p>
	</body>
</html>
